<template>
    <userMessage/>
    <image class="guangao" src="/static/image/guangao.png"></image>
    <view class="Ai_content">
        <view class="Ai_title">
            <view>
                <span>Ai任务队列</span>
                <text>(4/4)</text>
            </view>
            <text>当前用户等级最多同时进行4个AI绘图任务</text>
        </view>
        <view class="Ai_list">
            <view class="Ai_item" v-for="(item,index) in AiList" :key="index">
                <image src="https://cdn.uviewui.com/uview/swiper/swiper1.png" mode="aspectFill" class="Ai_item_icon"></image>
                <view class="Ai_item_content">{{ item.content }}</view>
                <view class="Ai_error" v-if="item.error" @click="showModalError(item)">AI任务生成失败</view>
            </view>
        </view>
    </view>
    <view class="Ai_content">
        <view class="Ai_title">
            <view>
                <span>我的AI相册</span>
            </view>
            <text>当前用户等级最多同时进行4个AI绘图任务</text>
        </view>
        <view class="Ai_list">
            <view class="Ai_item" v-for="(item,index) in AiList" :key="index">
                <image src="https://cdn.uviewui.com/uview/swiper/swiper1.png" mode="aspectFill" class="Ai_item_icon"></image>
                <view class="Ai_item_content">{{ item.content }}</view>
                <view class="Ai_error" v-if="item.error" @click="showModalError(item)">AI任务生成失败</view>
            </view>
        </view>
    </view>
</template>

<script setup>
import userMessage from '@/components/userMessage.vue'
import { ref } from 'vue'

const AiList = ref([
    {
        title: 'AI绘图任务1',
        content: 'AI绘图任务1的描述',
        status: 1
    },
    {
        title: 'AI绘图任务2',
        content: 'AI绘图任务2的描述',
        status: 2,
        error:'AI绘图任务2出现错误'
    }
])

const showModalError = (item) => {
    uni.showModal({
        title: '任务失败',
        content: item.error+'取消后重新提交',
        success: function (res) {
            if (res.confirm) {
                console.log('用户点击确定');
            } else if (res.cancel) {
                console.log('用户点击取消');
            }
        }
    });
}
</script>

<style scoped>
.guangao{
    width: 96%;
    margin: 20rpx 2%;
    margin-top: 0;
    height: 240rpx;
    border-bottom-left-radius: 10rpx;
    border-bottom-right-radius: 10rpx;
}

.Ai_content{
    width: 96%;
    margin: 20rpx 2%;
    .Ai_title{
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 20rpx;
        font-size: 32rpx;
        color: #ccc;
        font-weight: bold;
        text-align: center;
        position: relative;
        span{
            position: relative;
            &::after{
                content: "";
                position: absolute;
                bottom: -8rpx;
                left: 50%;
                transform: translateX(-50%);
                width: 40%;
                height: 4rpx;
                border-radius: 2rpx;
                background-color: #32b4aa;
            }
        }
        text{
            font-size: 22rpx;
        }
    }
    .Ai_list{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 20rpx;
        .Ai_item{
            width: 49%;
            height: 300rpx;
            margin-bottom: 20rpx;
            border-radius: 10rpx;
            background: #ff06da;
            position: relative;
            overflow: hidden;
            .Ai_item_content{
                padding: 14rpx 0;
                font-size: 26rpx;
                color: #e2e2e2;
                text-align: center;
                position: absolute;
                bottom: 0;
                width: 100%;
                background-color: #00000096;
                text-align: center;
                /* background-color: #fff; */
                /* box-shadow: 0 0 10rpx rgba(0,0,0,0.1); */
            }
            .Ai_error{
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                font-size: 28rpx;
                color: #fff;
                text-align: center;
                width: 100%;
                background-color: #ff0606c2;
                /* border-radius: 10rpx; */
                padding: 40rpx 0; 
                z-index: 1;
            }
            image{
                width: 100%;
                height: 100%;
            }
        }
    }
}
</style>